<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>MyPetStore</title>

    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<!--    <link rel="StyleSheet" href="../css/jpetstore.css" type="text/css" media="screen"/>-->
    <link rel="stylesheet" type="text/css" href="../css/style.css" media="screen" />
    <link rel="stylesheet" href="../css/main.css" />
    <link rel="stylesheet" href="../css/searchProduct.css">
    <noscript><link rel="stylesheet" href="../css/noscript.css" /></noscript>

    <script type="text/javascript" src="../js/jquery-3.5.1.min.js"></script>

    <meta name="generator" content="HTML Tidy for Linux/x86 (vers 1st November 2002), see www.w3.org" />
    <title>MyPetStore</title>
    <meta content="text/html; charset=windows-1252" http-equiv="Content-Type" />
    <meta http-equiv="Cache-Control" content="max-age=0" />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="Expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
    <meta http-equiv="Pragma" content="no-cache" />
    <script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
    <script type="text/javascript" src="../js/register.js"></script>
</head>
<body>

            <!-- Header -->
            <header id="header" class="alt" th:fragment="header">
                <a href="/catalog/view" class="logo"><strong>MyPetStore</strong> <span>Copyright Central South University</span></a>
                <div id="Search">
                    <div id="SearchContent">
                <form action="/catalog/viewProductId" class="search-wrap">
                    <table style="line-height: 40px">
                        <tr>
                            <td>
                                <input type="text" id="keyword" name="keyword" size="4" class="search" style="height: 40px;width: 200px"/>
                                <div class="auto hidden" id="auto">
                                    <div class="auto_out">1</div>
                                    <div class="auto_out">2</div>
                                </div>
                                <script src="../js/searchProduct.js"></script>
                            </td>
                            <td><input type="submit" name="searchProducts" value="Search" style="height: 40px"/>
                            </td>
                        </tr>
                    </table>
                </form>
                    </div>
                </div>
                <nav>
                    <a href="#menu">Menu</a>
                </nav>
            </header>

            <!-- Menu -->
            <nav id="menu">
                <ul class="links">
                    <li><a href="/catalog/view">Home</a></li>
                    <li><a href="/cart/viewCart">Cart</a></li>
                    <li th:if ="${session.account} ne null"><a href="/account/myaccount">Account</a></li>
                    <li><a href="../help.html">Help</a></li>
                </ul>
                <ul class="actions stacked">
                    <li><a href="#one" class="button primary fit">Get Started</a></li>
                    <li th:if ="${session.account} eq null"><a href="/account/signon" class="button fit">Log In</a></li>
                    <li th:if ="${session.account} ne null"><a href="/account/signoff" class="button fit">Sign Out</a></li>
                </ul>
            </nav>
</body>
</html>